<template>
  <div class="city-list-warp" ref='listWrapper'>
    <div>
      <div class="ct-hot-city-warp">
        <h2 class="ct-hot-city-title">热门城市</h2>
        <ul class="hot-list">
          <div class="hot-list-item-warp" v-for="(hotItem,index) in cityList.hotCities">
            <li v-if="index == 0 || index == 1" class="hot-list-item border-right"
              @click="handleCityClick(hotItem.name)" :key="index">
              {{hotItem.name}}
            </li>
            <li v-else-if="index == 2" class="hot-list-item" @click="handleCityClick(hotItem.name)" :key="index">
              {{hotItem.name}}
            </li>
            <li v-else-if="index % 3 == 0 || index % 3 == 1" class="hot-list-item border-topright"
              @click="handleCityClick(hotItem.name)" :key="index">
              {{hotItem.name}}
            </li>
            <li v-else-if="index % 3 == 2" class="hot-list-item border-top" @click="handleCityClick(hotItem.name)"
              :key="index">
              {{hotItem.name}}
            </li>
          </div>
        </ul>
      </div>
      <div class="ct-letter-sort-warp">
        <h2 class="ct-letter-sort-title">字母排序</h2>
        <ul class="ct-letter-sort-list">
          <li v-for="(letterItem,index) in getLetter" @click="gotoLetter" :key="index">{{letterItem}}</li>
        </ul>
      </div>
      <div class="citys-warp">
        <ul class="citys-list">
          <li class="citys-list-item" v-for="(citys, letter) in cityList.cities" :key="citys.id" :ref="letter">
            <div class="ct-hot-city-warp">
              <h2 class="ct-hot-city-title">{{letter}}</h2>
              <ul class="hot-list">
                <div class="hot-list-item-warp" v-for="(city,index) in citys">
                  <li v-if="index == 0 || index == 1" class="hot-list-item border-right"
                    @click="handleCityClick(city.name)" :key="index">
                    {{city.name}}
                  </li>
                  <li v-else-if="index == 2" class="hot-list-item" @click="handleCityClick(city.name)" :key="index">
                    {{city.name}}
                  </li>
                  <li v-else-if="index % 3 == 0 || index % 3 == 1" class="hot-list-item border-topright"
                    @click="handleCityClick(city.name)" :key="index">
                    {{city.name}}
                  </li>

                  <li v-else-if="index % 3 == 2" class="hot-list-item border-top" @click="handleCityClick(city.name)"
                    :key="index">
                    {{city.name}}
                  </li>
                </div>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';

  export default {
    name: 'CityList',
    props: ['cityList'],
    data: function() {
      return {
        scroll: null,
        letter: ''
      }
    },
    mounted: function() {
      this.scroll = new BScroll(this.$refs.listWrapper, {
        click: true
      });
    },
    computed: {
      getLetter() {
        var _A = 65,
          res = [];
        for (var i = 0; i < 26; i++) {
          res.push(String.fromCharCode((_A + i)));
        }
        return res;
      }
    },
    methods: {
      gotoLetter: function(e) {
        var e = e || window.event,
          tar = e.target || e.srcElement,
          val = tar.innerHTML;
        this.letter = val;

      },
      handleCityClick: function(cityName) {
        this.$store.commit('changeCityName', cityName);
        this.$router.back();
      }
    },
    watch: {
      letter: function() {
        var elem = this.$refs[this.letter][0];
        this.scroll.scrollToElement(elem);
      }
    }
  }
</script>

<style scoped="scoped">
  .city-list-warp {
    position: absolute;
    top: 0.78rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .city-list-warp .ct-hot-city-warp .ct-hot-city-title {
    font-size: .24rem;
    margin: .24rem .3rem;
    text-align: left;
  }

  .city-list-warp .ct-hot-city-warp .hot-list {
    position: relative;
    list-style: none;
    width: 100%;
    overflow: hidden;
    z-index: 0;
    background-color: #fff;
  }

  .city-list-warp .ct-hot-city-warp .hot-list li {
    box-sizing: border-box;
    display: inline-block;
  }

  .border-right {
    border-right: 1px solid #EEEEEE;
  }

  .border-topright {
    border-top: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
  }

  .border-top {
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
  }

  .hot-list-item-warp {
    width: 33.33%;
    background-color: #FFFFFF;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    text-align: center;
    margin-bottom: -1px;
    float: left;
    position: relative;
    z-index: 10;
    color: #212121;
  }

  .hot-list-item {
    width: 100%;
    height: 100%;
  }


  .ct-letter-sort-warp .ct-letter-sort-title {
    font-size: .24rem;
    margin: .24rem .3rem;
    text-align: left;
  }

  .ct-letter-sort-warp .ct-letter-sort-list {
    list-style: none;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
  }

  .ct-letter-sort-warp .ct-letter-sort-list li {
    box-sizing: border-box;
    width: 16.66%;
    background-color: #FFFFFF;
    height: .9rem;
    line-height: .9rem;
    font-size: .28rem;
    text-align: center;
    margin-bottom: -1px;
    float: left;
    z-index: 10;
    color: #212121;
  }

  .citys-warp {
    width: 100%;
  }

  .citys-warp .citys-list {
    z-index: 0;
    overflow: hidden;
    list-style: none;
    width: 100%;
    background-color: #f5f5f5;
  }
</style>
